<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>bilibiliAutoBlock Options</title>
    <link rel="stylesheet" type="text/css" href="options.css">
</head>
<body>
<table class="layout">
    <thead>
    <tr>
        <td></td>
        <td><img src="/img/logo.png" alt="bilibiliAutoBlock" height="50"/></td>
        <td><h1>bilibliAutoBlock 选项</h1></td>
        <td></td>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td></td>
        <td>
            特殊选项
            <p style="font-size: 0.2em">
                <input type="checkbox" id="file-io-checkbox" style="border: #66afe9"/>
                <label for="file-io-checkbox">文件读取</label>
            </p>
        </td>
        <td>
            <div>
                <h2>1.弹幕位置相关</h2>
                <p>
                    <input type="checkbox" id="bottom-exception"/>
                    <label for="bottom-exception">不屏蔽底部弹幕</label>
                </p>
                <p>
                    <input type="checkbox" id="top-exception"/>
                    <label for="top-exception">不屏蔽顶部弹幕</label>
                </p>
                <p>
                    <input type="checkbox" id="conversed-exception"/>
                    <label for="conversed-exception">不屏蔽逆向弹幕</label>
                </p>
            </div>
            <div>
                <h2>2.弹幕属性相关</h2>
                <p>
                    <input type="checkbox" id="advanced-exception"/>
                    <label for="advanced-exception">不屏蔽高级弹幕</label>
                </p>
                <p>
                    <input type="checkbox" id="subtitle-exception"/>
                    <label for="subtitle-exception">不屏蔽字幕弹幕</label>
                </p>
                <p>
                    <input type="checkbox" id="date-exception"/>
                    <label for="date-exception">不屏蔽这一时间之前的弹幕</label>
                    <code id="select-date" hidden="hidden">
                        <select id="select-year" name="select-year" title="年"></select>年
                        <select id="select-month" name="select-month" title="月"></select>月
                        <select id="select-day" name="select-day" title="日"></select>日
                    </code>
                </p>
            </div>
            <div id="file-io" hidden="hidden">
                <h2>3.模式选项导入导出</h2>
                <p>
                    <input hidden="hidden" id="file-port" type="file"/>
                    <button id="import-options" type="button" class="option-button">从文件导入模式及选项</button>
                    <button id="export-options" type="button" class="option-button">导出模式及选项到文件</button>
                </p>
                <p>
                    导入模式：【
                    <select id="import-mode" title="导入模式">
                        <option value="write">覆盖</option>
                        <option value="add">追加</option>
                    </select>
                    】
                    <input type="checkbox" id="port-history"/>
                    <label for="port-history">同时导入/导出历史记录</label>
                </p>
            </div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>匹配模式</td>
        <td>
            <div style="overflow: auto; height: 70%;">
                <table class="table">
                    <thead>
                    <tr>
                        <th>类型</th>
                        <th style="text-align: center">所屏蔽匹配模式</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr id="add-tr">
                        <td>
                            <select name="select-type" title="模式类型">
                                <option value="string">文本</option>
                                <option value="regexp">正则</option>
                            </select>
                        </td>
                        <td><input id="pattern-input" type="text" placeholder="请输入匹配模式"/></td>
                        <td>
                            <button type="button" id="add-button" class="option-button">添加</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td>历史记录</td>
        <td>
            <p><a href="record.html">点击查看</a></p>
            <p>
                历史屏蔽记录保留时间：【
                <select id="record-expiration-time" name="record-expiration-time" title="日志时间">
                    <option value="7">7天</option>
                    <option value="15">15天</option>
                    <option value="30">30天</option>
                </select>
                】（超过这一时间的记录将被清理以减少空间占用）
            </p>
            <p>
                清空历史屏蔽记录：
                <button type="button" id="clear-history" class="delete-button">点击立即清空</button>
            </p>
        </td>
        <td></td>
    </tr>
    </tbody>
</table>
<script src="/utils/utils.js"></script>
<script src="/utils/storage-name.js"></script>
<script src="options.js"></script>
</body>
</html>
